//公用弹层组件(带下拉选项)
import React from "react"
import { Modal, Icon } from "antd"
import DropDownItem from "./DropDownItem"
import styles from "./dropStyle.less"
// import PropTypes from 'prop-types'

//定义有状态组件
class ModalCheck extends React.Component {
    constructor (props) {
        super(props)

        this.state = {
            visible: false,
        }
    }
    //弹出
    showModal = () => {
        this.setState({
            visible: true,
        })
    }

    //确认回调
    handleOk = () => {
        const { onOk } = this.props
        onOk()
        this.setState({
            visible: false,
        })
    }

    //取消
    handleCancel = () => {
        const { onCancel } = this.props
        onCancel()
        this.setState({
            visible: false,
        })
    }

    render () {
        const { visible } = this.state  //获取子组件内部状态

        const { children } = this.props //获取父组件 DOM 子元素

        const { data } = this.props //获取父组件传参 (data : {dataSource:[]})

        return (
            <div>
                <span onClick={this.showModal}>
                    {children}
                </span>
                <Modal
                    title="提示信息"
                    visible={visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    centered
                >
                    <div className={styles.divContent}>
                        <p>
                            <Icon type="exclamation-circle-o" className={styles.iconStyle}></Icon>
                            <span className={styles.spanStyle}>{" 您所选的 "}
                                <DropDownItem {...data}/> {" 将执行删除操作，您是否确认操作？"}</span>
                        </p>
                    </div>
                </Modal>
            </div>
        )
    }
}

export default ModalCheck